<template>
    <!-- v-loading="isLoading" 加载延时 -->
    <div class="myPage" v-loading="isLoading">

        <!-- {{asData}} -->

        <div v-for="ans in asData " :key="ans.id">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>{{ans.id}}</span>
                    <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                </div>
                <el-descriptions direction="vertical" :column="6" border>
                    <el-descriptions-item label="用户名" :span="1">{{ans.id}}</el-descriptions-item>
                    <el-descriptions-item label="类别" :span="1">{{ans.classify}}</el-descriptions-item>
                    <el-descriptions-item label="email" :span="2">{{ans.email}}</el-descriptions-item>
                   
                    <!-- 秒杀和  预约 -->
                    <el-descriptions-item v-if="IsAnswerer" label="点击设置秒杀" :span="2" >
                        <el-button style=" padding: 3px 0" type="text" plain @click="setMiaoshaCount(ans.id)">设置秒杀
                        </el-button>
                    </el-descriptions-item>

                    <el-descriptions-item v-if="IsQuestioner" label="点击预约" :span="2" >
                        <el-button style=" padding: 3px 0" type="text" plain @click="yuyue(ans.id)">预约
                        </el-button>
                    </el-descriptions-item>

                    
                    <el-descriptions-item label="头像" :span="3">
                        <!-- data 的 url属性获取地址 ,可通过fit确定图片如何适应到容器框，同原生 object-fit。-->
                        <el-image style="width: 100px; height: 100px" :src="headImg.url" :fit="headImg.fits[1]">
                        </el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="介绍" :span="2">
                        {{ans.data}}
                    </el-descriptions-item>

                </el-descriptions>


            </el-card>
        </div>



        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page :page-size=2
            :current-page.sync="currentPage" @current-change="toPage(currentPage)">
        </el-pagination>
    </div>
</template>
<script>
    import qs from 'qs'

    export default {
        name: "page2",
        data() {
            return {
                isLoading: false,
                currentPage: 0,
                asData: {},
                total: 0,
                headImg: {
                    fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

                }
            }
        },
        computed: {
            IsAnswerer(){
                if(this.Authority=="Answerer"){
                    return true
                }
                return false
            },

            IsQuestioner(){
                if(this.Authority=="Questioner"){
                    return true
                }
                return false
            },
            Authority(){
                return this.$cookies.get("authority")
            }
        },
        methods: {
            // post 请求 建议引入 qs组件
            // qs.stringify(data)  能吧键值对的参数转换为正确的值
            getAsByPage(current) {
                let data = {
                    current: current,
                    size: 2,
                    total: 6
                }

                // const params = new URLSearchParams();
                // params.append("current",current)
                // params.append("size",2)

                this.$axios.post(this.MYURL + "/answerer/getByPage", qs.stringify(data))
                    // http://localhost:8001/miaosha/selectAll 
                    .then(res => {
                        console.log("getAsByPage:", res)
                        this.asData = res.data
                    }
                    )
                    .catch(function (error) { alert("请求失败" + error) })
            },

            // 跳转页面
            toPage(currentPage) {
                // alert(`第${String(currentPage)}页`)
                this.getAsByPage(currentPage)
                // console.log("AsData",this.asData)
            },

            // 获取总数
            getTotalCount() {
                this.$axios.post(this.MYURL + "/answerer/getAllCount")
                    // http://localhost:8001/miaosha/selectAll 
                    .then(res => {
                        // console.log("total:", res)
                        this.total = res.data
                    }
                    )
                    .catch(function (error) { alert("请求失败" + error) })
            },


            //设置 秒杀数量
            setMiaoshaCount(aid) {
                this.$prompt('请输入秒杀数量', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^\d{1,4}$/,
                    inputErrorMessage: '输入0-9999的数字'
                }).then(({ value }) => {

                    this.addMiaosha(aid, value)


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            addMiaosha(aid, value) {
                //  请求 -------
                this.$axios.get(this.MYURL + `/miaosha/setSum/${aid}/${value}`)
                    // http://localhost:8001/miaosha/selectAll 
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: res + `@@设置 秒杀商品，id--${aid},数量：` + value
                        });
                    }
                    )
                    .catch(error => {
                        this.$message({
                            type: 'danger',
                            message: error + `@@发送请求失败，id--${aid},数量：` + value
                        });
                    })

                    // /addSubmitTable/{aid}/{qid}
                    
            },
            yuyue(aid){
                let qid = this.$cookies.get("userId")
                this.$axios.get(this.MYURL + `/submitTable/addSubmitTable/${aid}/${qid}`)
                    // http://localhost:8001/miaosha/selectAll 
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: `${aid}预约成功,res:`+res
                        });
                    }
                    )
                    .catch(error => {
                        this.$message({
                            type: 'danger',
                            message: `${aid}预约失败,error:`+error
                        });
                    }) 
                    }


        },
        mounted() {
            this.getTotalCount()
            setTimeout(() => {
                this.isLoading = false
            }, 1000);
            this.getAsByPage(0)
            console .log("Authority:",this.Authority)
        },

    }
</script>
<style scoped>
    .myPage {
        height: 100%;
        /* background-color: rgba(241, 241, 205, 0.5); */
    }
</style>